import { App } from 'antd'
import Image from 'next/image'
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import OtpInput from 'react18-input-otp'

import { Violation } from '@/api/interface'
import { CheckSms, SendSms } from '@/api/modules'
import arrowNext from '@/assets/images/arrow-next.png'
import arrowPre from '@/assets/images/arrow-pre.png'
import store from '@/store'

import styles from '../styles/index.module.less'

interface Props {
  t: any
  violation: Partial<Violation>
  setSetup: Dispatch<SetStateAction<number>>
  code: string
  setCode: Dispatch<SetStateAction<string>>
}

export default function Verification({ t, setSetup, violation, code, setCode }: Props) {
  const { message } = App.useApp()

  // const [verificationCodes, setVerificationCodes] = useState(code)
  const isVerificationComplete = code.length === 6

  const sendSMS = async () => {
    await SendSms({
      mobile: violation.mobile!,
      fullName: violation.fullName!,
      email: violation.email ? violation.email.trim() : '',
    })
    setCode('')
    message.success(t['form.verification.success'])
    setTime(120)
  }

  const handleNextClick = async () => {
    if (isVerificationComplete) {
      const { data } = await CheckSms({ mobile: violation.mobile!, code })
      if (!data.success) return message.warning(t['form.verification.error'])
      store.dispatch({ type: 'update-website-token', payload: { token: data.token } })
      setSetup(3)
    }
  }

  const [time, setTime] = useState(120)

  useEffect(() => {
    const timer = setInterval(() => {
      if (time > 0) setTime(time - 1)
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [time])

  return (
    <div className={styles['form-verification']}>
      <h2 className={styles['form-title-h2']}>{t['form.verification.title']}</h2>
      <span className={styles['form-title-extra']} style={{ marginTop: '15px' }}>
        {t['form.verification.tips']}
      </span>
      <OtpInput
        containerStyle={styles['form-verification-code']}
        inputStyle={styles['form-verification-input']}
        value={code}
        onChange={setCode}
        isInputNum={true}
        numInputs={6}
        shouldAutoFocus
      />
      {time === 0 ? (
        <div className={styles['form-verification-resend']} onClick={sendSMS}>
          <span>{t['form.verification.resend']}</span>
        </div>
      ) : (
        <span className={styles['form-title-extra']}>
          {time} {t['form.verification.seconds']}
        </span>
      )}
      <div className={styles['form-button']}>
        <div className={styles['form-button-pre']} onClick={() => setSetup(1)}>
          <Image src={arrowPre} className={styles['button-icon']} alt="pre" />
          <span className={styles['button-text']}>{t['form.button.previous']}</span>
        </div>
        <div
          className={
            isVerificationComplete ? styles['form-button-next'] : styles['form-button-disabled']
          }
          onClick={() => handleNextClick()}
        >
          <span className={styles['button-text']}>{t['form.button.next']}</span>
          <Image src={arrowNext} className={styles['button-icon']} alt="next" />
        </div>
      </div>
    </div>
  )
}
